import styles from "./index.less"
import {useRef, useState, useEffect} from "react"
import * as echarts from "echarts";

const Dash = () => {
    const chart = useRef()
    let timer
    let inside = 0
    let alpha = 0.6
    let clear = 0.6
    useEffect(() => {
        const myChart = echarts.init(chart.current);
        let option
        option = {
            title: {
                text: `巡航中`,
                subtext: '资产进度 30%',
                left: 'center',
                top: '40%', //top待调整
                textStyle: {
                    color: '#DBCA6C',
                    fontSize: 35,
                },
                subtextStyle: {
                    color: '#ffffff',
                    fontSize: 16,
                    top: 'center',
                },
                itemGap: 10 //主副标题间距
            },
            series: [

                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: -180,
                    splitNumber: 20,
                    axisLine: {
                        lineStyle: {
                            width: 10,
                            color: [
                                [0.3, 'rgb(219,202,108,0.3)'],
                                [1, 'rgb(94,95,103,0.3)']
                            ]
                        }
                    },
                    pointer: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '',
                            width: 4
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 70
                        }
                    ],


                },
                {
                    name: '灰色内圈', //刻度背景
                    type: 'gauge',
                    z: 2,
                    radius: '62%',
                    startAngle: 90,
                    endAngle: -270,
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [1, 'rgba(94,95,103,0.4)']
                            ],
                            width: 2,
                            opacity: 1, //刻度背景宽度
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    detail: {
                        show: 0
                    },
                    // data: [
                    //     {
                    //         value: 50,
                    //         name: 'SCORE'
                    //     }
                    // ]
                },
            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        setInterval(() => {
            if (inside > 1) {
                inside =-0.5
                alpha = 1
                clear=1

            }
            if(inside<0.3 && inside>0.1){
                clear=0.5
                alpha=0.5
            }
            if (inside > 0.9) {

                alpha = 1
                clear = 1
            }
           if(inside>0.3 && inside<0.7){
               alpha = Math.random()+0.4;
               clear = 0.5
           }
           if(inside>0.7){
               clear = Math.random();
           }
           if(inside>0.5){
               // clear=1
               alpha=1
           }

            inside += 0.008
            option = {
                title: {
                    text: `巡航中`,
                    subtext: '资产进度 30%',
                    left: 'center',
                    top: '40%', //top待调整
                    textStyle: {
                        color: '#DBCA6C',
                        fontSize: 35,
                    },
                    subtextStyle: {
                        color: '#ffffff',
                        fontSize: 16,
                        top: 'center',
                    },
                    itemGap: 10 //主副标题间距
                },
                series: [

                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: -180,
                        splitNumber: 20,
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [inside > 0.8 ? 0 : 0.3, `rgb(219,202,108,${clear})`],
                                    [1, `rgb(94,96,101,${alpha})`]
                                ]
                            }
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            distance: -30,
                            length: 30,
                            lineStyle: {
                                color: '',
                                width: 4
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 70
                            }
                        ],


                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '62%',
                        startAngle: 90,
                        endAngle: -270,
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [inside, 'rgba(94,95,103)'],
                                    [1, `rgba(94,95,103,${inside<0.1?1:0.4})`]
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        splitNumber: 20,
                        z: 2,
                        radius: '82%',
                        startAngle: 90,
                        axisTick: {
                            distance: 0,
                            length: 0,
                            lineStyle: {
                                color: "auto"
                            }
                        },
                        endAngle: -270,
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    // [inside,'rgba(94,95,103)'],
                                    [1, 'rgb(94,96,101,0.3)']
                                ],
                                width: 3,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        // axisTick: {
                        //     show: false
                        // },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        splitNumber: 30,
                        z: 2,
                        radius: '82%',
                        startAngle: 90,
                        axisTick: {
                            show: inside > 0,
                            distance: -20,
                            length: 20,
                            width: 1,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        endAngle: -270,
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [inside, 'rgba(94,95,103)'],
                                    [1, 'rgb(94,96,101,0.4)']
                                ],
                                width: 3,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        // axisTick: {
                        //     show: false
                        // },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        splitNumber: 30,
                        z: 2,
                        radius: '82%',
                        startAngle: 90,
                        axisTick: {
                            show: inside < 0,
                            distance: -20,
                            length: 20,
                            width: 1,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        endAngle: -270,
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, `rgb(94,96,101,${inside<0.1?1:0.4})`]
                                ],
                                width: 3,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        // axisTick: {
                        //     show: false
                        // },
                        detail: {
                            show: 0
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }, 10)
        // 定义变量，记录当前数据值和旋转角度
    }, [])
    return (
        <div className={styles.container}>
            <div ref={chart} className={styles.chart}></div>
        </div>
    )
}
export default Dash